<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
// startTime = +new Date();
// min: startTime,
// return Math.max(0, val - startTime) + ' ms';

import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let date_timestr = +new Date();  //任务开始的最小值我这里就用的目前时间
    date_timestr = +new Date('2022/10/19');
    let data = [
        {
            opacity: [
                1000 * 60 * 60 * 24 * 0,
                1000 * 60 * 60 * 24 * 4,
                1000 * 60 * 60 * 24 * 2,
            ],
            high: [
                1000 * 60 * 60 * 24 * 10,
                1000 * 60 * 60 * 24 * 10,
                1000 * 60 * 60 * 24 * 100,
            ]
        },
        {
            opacity: [
                1000 * 60 * 60 * 24 * 2.2,
                1000 * 60 * 60 * 24 * 1,
                1000 * 60 * 60 * 24 * 2,
            ],
            high: [
                1000 * 60 * 60 * 24 * 1,
                1000 * 60 * 60 * 24 * 1.6,
                1000 * 60 * 60 * 24 * .9,
            ]
        },
        {
            opacity: [
                1000 * 60 * 60 * 24 * 7.2,
                1000 * 60 * 60 * 24 * 1,
                1000 * 60 * 60 * 24 * 2,
            ],
            high: [
                1000 * 60 * 60 * 24 * 10,
                1000 * 60 * 60 * 24 * 1.6,
                1000 * 60 * 60 * 24 * .9,
            ]
        },
    ];
    let barGap = '10%';
    let barWidth = 24;
    let itemStyleDetail = {
        '0': {
            color: '#aad26d'
        },
        '1': {
            color: '#989896'
        },
        '2': {
            color: '#fb6846'
        }
    }
    let seriesGroup = data.map((item, index) => {
        let seriesGroup_opacity = {
            //开始空白（隐藏部分需要在后面加0）tooltip formatter内有判断需要修改注意
            name: '计划时间0' + index,
            type: 'bar',
            stack: 'total',   //重点
            label: {
                show: false
            },
            itemStyle: {
                opacity: 0,
            },
            emphasis: {
                focus: 'series'
            },
            barWidth: barWidth,
            barGap: barGap,
            data: item.opacity,
            tooltip: {  //隐藏这个的鼠标悬浮
                show: false
            }
        }
        // 不一样的颜色修改
        let newHigh = item.high.map((highItem, hindex) => {
            let item = {
                value: highItem,
                itemStyle: itemStyleDetail[hindex]
            }
            return item;
        })
        let seriesGroup_high = {
            name: '计划时间' + index,
            type: 'bar',
            stack: 'total',   //重点
            label: {
                show: false
            },
            emphasis: {
                focus: 'series'
            },
            barWidth: barWidth,
            barGap: barGap,
            data: newHigh
        }
        let seriesGroup = [seriesGroup_opacity, seriesGroup_high];
        return seriesGroup;
    })
    let seriesData = seriesGroup.flat();
    console.log(seriesData);
    const formatterTime = (d) => {
        let d_ = new Date(d);
        return `${d_.getFullYear()}/${d_.getMonth() + 1}/${d_.getDate()} ${d_.getHours()}:${d_.getMinutes()}:${d_.getSeconds()}`
    }
    let option = {
        grid: {
            containLabel: true,
            right: '10%',
            left: '5%',
            bottom: '6%',
            top: '6%',
        },
        // dataZoom: {
        //     show: true, // 为true 滚动条出现
        //     realtime: true,
        //     type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
        //     height: 20, // 表示滚动条的高度，也就是粗细
        //     start: 0, // 表示默认展示20%～80%这一段。
        //     end: 10
        // },
        tooltip: {
            formatter: function (fParam) {
                let seriesIndex = fParam.seriesIndex;
                let dataIndex = fParam.dataIndex;
                console.log(seriesIndex, dataIndex)
                // console.log(option.series[seriesIndex - 1].data[dataIndex])
                let opacityTime = 0;
                let hightTime = 0;
                for (let i = seriesIndex; i--; i > 0) {
                    //series 的关系；1个隐藏用的 1个显示用的 [隐藏，显示，隐藏，显示];
                    // 对2取余那大的就是隐藏的
                    if (i % 2 == 0) {
                        opacityTime += option.series[i].data[dataIndex];
                    } else {
                        hightTime += option.series[i].data[dataIndex].value;
                    }
                }
                let startTime = formatterTime(date_timestr + opacityTime + hightTime);
                let endTime = formatterTime(date_timestr + fParam.value + opacityTime + hightTime);
                return startTime + '—' + endTime;
            }
        },
        xAxis: {
            type: 'value',
            minInterval: 1000 * 60 * 60 * 24,       //最小轴线分割 一天的的值 如果是小时自行修改
            // 此处可
            // 最大的用于限制x多刻度线的一刻度值 这里8天一刻度；其它的都可以多了如果要细致到小时等等自行修改
            // 如果数据是天的且想要精确到一天甚至更小推荐添加滚动条
            // maxInterval: 1000 * 60 * 60 * 24 * 1,   //最大轴线分割 一天的的值 如果是小时自行修改
            maxInterval: 1000 * 60 * 60 * 24 * 10,   //最大轴线分割 一天的的值 如果是小时自行修改
            axisLabel: {
                fontSize: 12,
                fontWeight: 600,
                color: '#888',
                formatter: function (val, index) {
                    let date_ = new Date(val + date_timestr);
                    let label_ = `${date_.getFullYear()}/${date_.getMonth() + 1}/${date_.getDate()}`;
                    return label_;
                },
                // maxInterval 的设置刻度较多旋转显示
                rotate: 20
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                },
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            data: ['运行', '停机', '故障'],
            axisLabel: {
                color: '#333',
                fontSize: 12,
                fontWeight: 600
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: seriesData
    };
    myChart.setOption(option);
}

onMounted(() => {
    console.log(echarts.getInstanceByDom(chart.value))
    initChart();
})
</script>

<style lang="less" scoped>
.chart {
    width: 60%;
    height: 500px;
    margin-top: 20px;
}
</style>